<template>
	<view class="index edit">
		<uni-easyinput
			v-model="value"
			focus
			:placeholder="'请输入' + label"
		></uni-easyinput>
		<view class="edit-btn">
			<button
				type="primary"
				style="width: 100%; margin: 0; background-color: #007aff"
				@click="onClick"
			>
				保存
			</button>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { update } from '../../../../api/user/index.js'
export default {
	data() {
		return {
			value: '',
			key: '',
			label: ''
		}
	},

	computed: {
		...mapState('user', ['userInfo'])
	},

	methods: {
		...mapMutations('user', ['setUserInfo']),
		onClick() {
			if (this.value) {
				update({
					username: this.userInfo.username,
					[this.key]: this.value
				}).then((data) => {
					this.setUserInfo(data)
					uni.navigateBack()
				})
			}
		}
	},

	onLoad(option) {
		this.key = option.key
		this.label = option.label
		this.value = this.userInfo[this.key]
		uni.setNavigationBarTitle({
			title: '修改' + this.label
		})
	}
}
</script>

<style lang="scss" scoped>
.edit {
	&-btn {
		display: flex;
		justify-content: center;
		margin-top: 16px;
	}
}
</style>
